<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script> -->
    <script src="./axios1.6.7.min.js"></script>
    <title>Axios的基本使用</title>
</head>
<body>
    <script>
        function Axios(config){
            this.default=config;
            this.intercepters={
                request:{},
                Response:{}
            }
        }exit
        //原型上添加相关的方法
        Axios.prototype.request= function(config){
             console.log('发送Ajax请求')
        }
        Axios.prototype.get=function(config){            
            console.log('get方法，会调用 request')
            return this.request({method:'GET'})
        }
        Axios.prototype.post=function(config){
            console.log('post方法，会调用 request')
            return this.request({method:'POST'})
        }

        //声明函数
        function  createInstance(config){
            let context= new Axios(config) 
            let instance = Axios.prototype.request.bind(context);  // instance 就是一个函数了， 此时instance 不能当对象使用
            // 将 Axios.prototype 对象中的方法添加到instance函数对象中
            Object.keys(Axios.prototype).forEach(key=>{
                console.log(key);
                instance[key]=Axios.prototype[key].bing(context);
            })
            // 为 instance 函数对象添加属性 default and intercepters
            Object.keys(context).forEach(key => {
                console.log(key);
                instance[key]=context[key]
            })
            return instance; 
        }

        let axios= createInstance();
        //最终的呈现就是 创建的 axios  的使用方式，即可以像对象的方式， axios.get(), 又可以像方法 axios({method:'GET'}) 使用

    </script>

</body>
</html>